<!--
 * @Description: 首页head-swiper-模块 主要不太想在首页看到太多东西拆出来
 * @Author: 老五 13521685612@163.com
 * @Date: 2024-11-01 01:27:51
 * @LastEditors: 老五 13521685612@163.com
 * @LastEditTime: 2024-11-05 20:45:20
 * @FilePath: /lieshou-app/components/z-home-head.vue
-->
<template>
	<view>
		<view class="head-boxs">
			<view class="head-title">
				{{headIns.title}}
			</view>
			<view class="head-tag">
				{{headIns.tag[0]}} | {{headIns.tag[1]}} | {{headIns.tag[2]}}
			</view>
			<!-- l轮播 -->
			<!-- head轮播图模块 -->
			<!-- <view class="swiper-box">
				<view class="swiper-course">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration">
						<swiper-item v-for="(item,index) in list" @click="getItem(item)" :key="index">
							<image :src="item.cover"></image>
						</swiper-item>
					</swiper>
				</view>
			</view> -->
			<!-- 自定义卡片轮播 -->
			<swiper class="swiperBox" previous-margin="10rpx" next-margin='240rpx' :circular="true"
				@change="swiperChange">
				<swiper-item class="swiperItem" v-for="(item,index) in list" :key="index" @click="getSwiperItem(item,index)">
					<view class="swiperWrap" :class="{'active':swiper_index == index}">
						<view class="swiperPic">
							<image :src="item.cover"></image>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 轮播。。。 -->
			<view class="swiper-dot-box">
				<view :class="swiper_index===index?'dot-active':'dot'" v-for="(item,index) in list" :key="index"></view>
			</view>
			<!-- end -->
			<view class="head-jump-title" @click="getNavTo">
				{{headIns.jumpTitle}}
			</view>
		</view>
		<view class="gap"></view>
	</view>

</template>

<script>
	export default {
		name: "z-home-head",
		data() {
			return {
				indicatorDots: true,
				autoplay: false,
				interval: 12000,
				duration: 500,
				swiper_index:0,
				headIns: {
					jumpTitle: '前往 选课中心',
					title: '提升情感能力-做自己感情的护航人',
					tag: ['脱单相亲', '恋爱经营', '婚姻经营']
				},
				// banner数据
				list: [],

			};
		},
		mounted() {
			this.initBanner()
		},
		methods: {
			// 获取服务中心banner
			initBanner() {
				this.$apis.getServiceBanner({}).then((res) => {
					if (res.list && res.list.length > 0) {
						this.list = res.list
					}
				}).catch(() => {})
			},
			/**
			 * 选中跳转对应页面
			 * @param {Object} item
			 */
			getItem(item) {
				uni.navigateTo({
					url: item.url
				})
			},
			swiperChange(e) {
				this.swiper_index = e.detail.current;
			},
			getSwiperItem(item,index){
				uni.navigateTo({
					url:item.url
				})
			},
			/**
			 * 进入选课中心
			 */
			getNavTo() {
				uni.navigateTo({
					url:"/pages/course_selection"
				})
			}
		}
	}
</script>

<style lang="scss">
	// head
	.head-boxs {
		width: 100%;
		padding-bottom: 30rpx;


		.head-title {
			width: 100%;
			justify-content: center;
			text-align: center;
			font-size: 40rpx;
			padding: 36rpx 0 16px 0;
			font-weight: 900;
			letter-spacing: 0px;
			color: rgba(0, 0, 0, 1);
		}

		.head-tag {
			width: 100%;
			opacity: 1;
			font-size: 28rpx;
			text-align: center;
			font-weight: 500;
			letter-spacing: 0px;
			color: rgba(56, 56, 56, 1);
		}

		.head-jump-title {
			width: 196rpx;
			padding: 0rpx 10rpx;
			height: 52rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			opacity: 1;
			border-radius: 256rpx;
			background: rgba(0, 0, 0, 1);
			font-size: 24rpx;
			font-weight: 500;
			margin-top: 25rpx;
			letter-spacing: 0px;
			color: rgba(255, 255, 255, 1);
		}

		// 
		.swiperBox {
			height: 280rpx;
			overflow: hidden;
			padding: 0 30rpx;
			margin-top: 52rpx;
			
			.swiperItem {
				// border-radius: 20rpx;
				overflow: hidden;
			}
			
			.swiperWrap {
				width: 90%;
				// transform: scale(0.9);
				transition: transform 0.3s ease-in-out 0s;
			}
			
			 .active {
				// transform: scale(1);
				will-change: transform, filter;
				border-radius: 10rpx;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.3)!important;
				border: 4rpx solid undefined!important;
				box-shadow: 0rpx 8rpx 8rpx  rgba(0, 0, 0, 0.25)!important;
				backdrop-filter: blur(8rpx)!important;
			}
			
			.swiperPic {
				width: 100%;
				height: 264rpx;
			}
			
			.swiperPic image {
				width: 100%;
				height: 100%;
			}
		}


.swiper-dot-box{
	width: 100%;
	text-align: center;
	display: flex;
	align-items: center;
	margin: 10rpx 0 35rpx 0;
	justify-content: center;
	.dot{
		width: 20rpx;
		height: 10rpx;
		opacity: 1;
		margin-right: 24rpx;
		border-radius: 6rpx;
		background: rgba(191, 191, 191, 1);
	}
	.dot-active{
		width: 52rpx;
		height: 10rpx;
		margin-right: 24rpx;
		opacity: 1;
		border-radius: 6rpx;
		background: rgba(0, 0, 0, 1);
	}
}

	}

	.gap {

		width: 750rpx;
		margin: 0 auto;
		height: 34rpx;
		will-change: transform, filter;
		background: rgba(225, 243, 249, 1);
		filter: blur(5px);

	}
</style>